.JTTLoginBox {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	position: relative;

	.Title {
		position: relative;
		width: 391px;
		height: 46px;
		display: flex;
		align-items: baseline;
		justify-content: center;
		margin-bottom: 16px;

		& > img {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			display: block;
			z-index: -1;
		}

		& > div {
			line-height: 46px;

			&:nth-child(2) {
				font-size: 18px;
				font-family: Microsoft YaHei;
				font-weight: bold;
				color: #fae585;
				margin-right: 24px;
			}

			&:nth-child(3) {
				font-size: 14px;
				font-family: Microsoft YaHei;
				font-weight: bold;
				color: #ffffff;
			}
		}
	}

	.SmallTitle {
		width: 335px;
		height: 30px;
		position: relative;
		margin: 12px 0;

		& > img {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 15px;
			z-index: -1;
			display: block;
		}

		& > div {
			width: 100%;
			height: 100%;
			line-height: 30px;
			font-size: 16px;
			font-family: Microsoft YaHei;
			font-weight: bold;
			color: #ffffff;
			text-indent: 16px;
		}
	}

	.ChartsOne {
		width: 100%;
		height: 26vh;
	}

	.ChartsTwo {
		width: 100%;
		height: 31vh;
	}

	& > .backImage {
		position: absolute;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		z-index: -1;
		display: block;
	}

	& > .Mask {
		position: absolute;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		z-index: 1;
		pointer-events: none;
	}

	& > .Map {
		position: absolute;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		z-index: 0;
		display: flex;
		align-items: center;
		justify-content: center;

		& > .animate {
			position: absolute;
			left: calc(50vw - 30vh);
			width: 60vh;
			height: 60vh;
			z-index: -1;
			display: flex;
			align-items: center;
			justify-content: center;

			& > img {
				width: 100%;
				height: 100%;
				display: block;
				animation: linear Circle 16s infinite;
			}
		}

		& > .AMap {
			width: 100%;
			height: 100%;
			background: transparent !important;
		}

		& > .legend {
			width: 200px;
			height: 288px;
			position: absolute;
			z-index: 2;
			right: 560px;
			top: 200px;
			background: #273342;
			border: 2px solid #befbff;
			opacity: 0.8;
			border-radius: 20px;

			& > img {
				width: 100%;
				height: 100%;
				display: block;
			}
		}
	}

	& > .top {
		width: 100vw;
		height: 112px;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 5;

		& > img {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			display: block;
			z-index: -1;
		}

		& > div {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;

			& > div:first-child,
			& > div:last-child {
				position: relative;
				width: 270px;
				height: 60px;
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;

				&:hover > img {
					opacity: 0.8;
				}

				& > img {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					z-index: -1;
					display: block;
					opacity: 0.6;
					transition: opacity 0.35s;
				}

				& > div {
					font-size: 24px;
					font-family: YouSheBiaoTiHei;
					font-weight: 400;
					color: #fffffe;
				}

				& > span {
					margin: 0 10px;
					font-size: 18px;
					color: #fffffe;
				}
			}

			& > div:nth-child(2) {
				width: 52vw;
				display: flex;
				height: 100%;
				line-height: 88px;
				justify-content: center;
				font-size: 46px;
				font-family: YouSheBiaoTiHei;
				font-weight: 400;
				color: #ffffff;
				background: linear-gradient(0deg, #fbffd2 0%, #ffffff 100%);
				background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}
	}

	& > .MapNav {
		position: fixed;
		left: 0;
		top: 110px;
		width: 100vw;
		height: 48px;
		z-index: 2;
		background: rgba(0, 0, 0, 0.35);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	& > .btm {
		position: absolute;
		left: 0;
		bottom: 24px;
		width: 100vw;
		height: 100px;
		z-index: 5;
		display: flex;
		align-items: center;
		justify-content: center;
		user-select: none;

		& > div {
			width: 335px;
			height: 100px;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;

			&:first-child {
				& > .ItemNav {
					position: absolute;
					right: 16px;
					bottom: 20px;
					width: 310px;
					height: 205px;
					z-index: -2;

					& > img {
						width: 100%;
						height: 100%;
						display: block;
					}

					& > div {
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						position: absolute;
						left: 0;
						top: 8px;
						width: 100%;
						height: calc(100% - 60px);
						z-index: 1;

						& > div {
							text-align: center;
							width: 100%;
							font-size: 25px;
							padding: 8px 0;

							&:hover {
								color: rgba(96, 219, 255, 1);
							}

							&:first-child {
								position: relative;

								&::after {
									position: absolute;
									content: "";
									left: 16px;
									right: 16px;
									bottom: 0;
									height: 2px;
									background: linear-gradient(
										90deg,
										rgba(96, 219, 255, 0),
										rgba(96, 219, 255, 1),
										rgba(96, 219, 255, 0)
									);
								}
							}
						}
					}
				}
			}

			&:hover > img:nth-child(1) {
				opacity: 0.8;
			}

			& > img:nth-child(1) {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				display: block;
				z-index: -1;
				opacity: 1;
				transition: opacity 0.35s;
			}

			& > div {
				font-size: 37px;
				font-family: YouSheBiaoTiHei;
				font-weight: 400;
				color: #ffffff;
			}

			& > .icon {
				width: 46px;
				height: 46px;
				display: block;
				margin: 0 10px;
			}

			&:nth-child(3),
			&:nth-child(4) {
				flex-direction: row-reverse;

				& > img:nth-child(1) {
					transform: rotateY(180deg);
				}
			}
		}
	}

	& > .left,
	& > .right {
		position: absolute;
		top: 120px;
		height: calc(100vh - 184px);
		width: 514px;
		pointer-events: auto;
		z-index: 2;

		&.left {
			left: 20px;
		}

		&.right {
			right: 20px;
		}

		& > img {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			display: block;
			z-index: -1;
		}

		& > div {
			width: 100%;
			height: 100%;
			padding-top: 7vh;
			perspective: 100px;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			flex-direction: column;

			& > .leftBox {
				transform-origin: 0 100% 0;
				transform: rotateY(2deg);
			}

			& > .rightBox {
				transform-origin: 100% 100% 0;
				transform: rotateY(-2deg);
			}
		}
	}

	& > .Login {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		z-index: 10;
		background: rgba(0, 0, 0, 0.35);
		display: flex;
		align-items: center;
		justify-content: center;

		& > .LoginBox {
			width: 700px;
			height: 425px;
			position: relative;

			& > img {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				z-index: -1;
				display: block;
			}

			& > div {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

				.ant-form {
					padding: 100px 0 0 0;
					width: 428px;

					.ant-input-affix-wrapper {
						background: #011c45;
						height: 57px;
						border: 2px solid #a8eefa;
						box-shadow: 0 0 8px #a8eefa;
						border-radius: 4px;

						.ant-input-prefix {
							color: #4e9cff;
							font-size: 28px;
							padding-right: 8px;
							position: relative;

							&::after {
								position: absolute;
								content: "";
								right: 0;
								top: 8px;
								bottom: 8px;
								width: 1px;
								background: #00286e;
							}
						}

						.ant-input-suffix {
							font-size: 24px;

							& > span {
								color: #4e9cff;
							}
						}

						.ant-input {
							background: #011c45;
							text-indent: 8px;
							color: white;
							font-size: 18px;

							&::placeholder {
								font-size: 16px;
								font-family: Microsoft YaHei;
								font-weight: 400;
								color: #4e9cff;
							}
						}
					}

					button {
						padding: 0;
						margin: 0;
						width: 428px;
						height: 58px;
						position: relative;
						background: transparent;

						& > img {
							position: absolute;
							left: 0;
							top: 0;
							width: 100%;
							height: 100%;
							display: block;
							z-index: -1;
						}

						& > div {
							font-size: 20px;
							font-family: Microsoft YaHei;
							font-weight: bold;
							color: #ffffff;
						}
					}
				}
			}
		}
	}
}

@keyframes Circle {
	to {
		transform: rotate(0deg);
	}

	from {
		transform: rotate(-360deg);
	}
}
